<!DOCTYPE html>
<html>

<head>
    <meta name="layout" content="main2"/>
    <title>统计</title>
</head>

<body>
<div class="main-body">
    <div class="page-wrapper">
        <!-- Page-header start -->
        <div class="page-header">
            <div class="page-header-title">
                <h4>统计</h4>
            </div>

            <div class="page-header-breadcrumb">
                <ul class="breadcrumb-title">
                    <li class="breadcrumb-item">
                        <a href="/salesDashboard/index">
                            <i class="icofont icofont-home"></i>
                        </a>
                    </li>

                    <li class="breadcrumb-item">统计</li>
                </ul>
            </div>
        </div>
        <!-- Page-header end -->
        <!-- Page-body start -->
        <div class="page-body">
            <g:if test="${flash.message}">
                <div class="message alert alert-info" role="status">${flash.message}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                </div>
            </g:if>

        <!-- Hover table card start -->

        <!-- 环形图 -->
        <div id="one" style="width: 100%; height: 360px;"></div>

            <!-- Hover table card end -->
         <div class="card">
                <div class="card-header">
                    <h5>部门统计</h5>

                    <div class="card-header-right">

                        <i class="icofont icofont-rounded-down"></i>
                    </div>
                </div>
                <div class="card-block dt-responsive">

                    <div class="table-responsive">
                        <div id="dom-jqry_wrapper" class="dataTables_wrapper dt-bootstrap4">

                          <g:form method="POST" action="dashboard">
                              <div class="row m-0">
                                  <div class="col-md-10 p-l-0">
                                  <div id="dom-jqry_filter" class="text-left">
                                      <label class="block">
                                      <div class="form-group row">
                                        <div class="col-md-6 intput-daterange input-group">
                                          <input type="text" valctrl="accountStartTime" value="${params?.accountStartTime}" placeholder="客户开始时间" class="form-control form_date">
                                          <input type="hidden" id="accountStartTime" name="accountStartTime" value="date.struct">
                                          <input type="hidden" id="accountStartTime_day" name="accountStartTime_day" value="">
                                          <input type="hidden" id="accountStartTime_month" name="accountStartTime_month" value="">
                                          <input type="hidden" id="accountStartTime_year" name="accountStartTime_year" value="">

                                          <span class="input-group-addon">至</span>

                                          <input type="text" valctrl="accountEndTime" value="${params?.accountEndTime}" placeholder="客户结束时间" class="form-control form_date">
                                          <input type="hidden" id="accountEndTime" name="accountEndTime" value="date.struct">
                                          <input type="hidden" id="accountEndTime_day" name="accountEndTime_day" value="">
                                          <input type="hidden" id="accountEndTime_month" name="accountEndTime_month" value="">
                                          <input type="hidden" id="accountEndTime_year" name="accountEndTime_year" value="">
                                      </div>

                                      <div class="col-md-6 intput-daterange input-group">
                                        <input type="text" valctrl="leadStartTime" value="${params?.leadStartTime}" placeholder="线索开始时间" class="form-control form_date">
                                        <input type="hidden" id="leadStartTime" name="leadStartTime" value="date.struct">
                                        <input type="hidden" id="leadStartTime_day" name="leadStartTime_day" value="">
                                        <input type="hidden" id="leadStartTime_month" name="leadStartTime_month" value="">
                                        <input type="hidden" id="leadStartTime_year" name="leadStartTime_year" value="">

                                        <span class="input-group-addon">至</span>

                                        <input type="text" valctrl="leadEndTime" value="${params?.leadEndTime}" placeholder="线索结束时间" class="form-control form_date">
                                        <input type="hidden" id="leadEndTime" name="leadEndTime" value="date.struct">
                                        <input type="hidden" id="leadEndTime_day" name="leadEndTime_day" value="">
                                        <input type="hidden" id="leadEndTime_month" name="leadEndTime_month" value="">
                                        <input type="hidden" id="leadEndTime_year" name="leadEndTime_year" value="">
                                    </div>

                                    </div>
                                    <div class="form-group row">
                                      <div class="col-md-6 intput-daterange input-group">
                                        <input type="text" valctrl="activityStartTime" value="${params?.activityStartTime}" placeholder="日历开始时间" class="form-control form_date">
                                        <input type="hidden" id="activityStartTime" name="activityStartTime" value="date.struct">
                                        <input type="hidden" id="activityStartTime_day" name="activityStartTime_day" value="">
                                        <input type="hidden" id="activityStartTime_month" name="activityStartTime_month" value="">
                                        <input type="hidden" id="activityStartTime_year" name="activityStartTime_year" value="">

                                        <span class="input-group-addon">至</span>

                                        <input type="text" valctrl="activityEndTime" value="${params?.activityEndTime}" placeholder="日历结束时间" class="form-control form_date">
                                        <input type="hidden" id="activityEndTime" name="activityEndTime" value="date.struct">
                                        <input type="hidden" id="activityEndTime_day" name="activityEndTime_day" value="">
                                        <input type="hidden" id="activityEndTime_month" name="activityEndTime_month" value="">
                                        <input type="hidden" id="activityEndTime_year" name="activityEndTime_year" value="">
                                    </div>
                                    <div class="col-md-3">
                                        <g:select class="form-control" name="activityStatus" id="activityStatus"
                                        from="${com.next.Activity.constrainedProperties.status.inList}" value="${params?.activityStatus}"
                                        noSelection="${['': '日历状态']}"/>
                                    </div>

                                  </div>
                                  <div class="form-group row">
                                    <div class="col-md-6 intput-daterange input-group">
                                      <input type="text" valctrl="opportunityStartTime" value="${params?.opportunityStartTime}" placeholder="商机开始时间" class="form-control form_date">
                                      <input type="hidden" id="opportunityStartTime" name="opportunityStartTime" value="date.struct">
                                      <input type="hidden" id="opportunityStartTime_day" name="opportunityStartTime_day" value="">
                                      <input type="hidden" id="opportunityStartTime_month" name="opportunityStartTime_month" value="">
                                      <input type="hidden" id="opportunityStartTime_year" name="opportunityStartTime_year" value="">

                                      <span class="input-group-addon">至</span>

                                      <input type="text" valctrl="opportunityEndTime" value="${params?.opportunityEndTime}" placeholder="商机结束时间" class="form-control form_date">
                                      <input type="hidden" id="opportunityEndTime" name="opportunityEndTime" value="date.struct">
                                      <input type="hidden" id="opportunityEndTime_day" name="opportunityEndTime_day" value="">
                                      <input type="hidden" id="opportunityEndTime_month" name="opportunityEndTime_month" value="">
                                      <input type="hidden" id="opportunityEndTime_year" name="opportunityEndTime_year" value="">
                                  </div>
                                  <div class="col-md-3">
                                      <g:select class="form-control" name="opportunityStatus" id="opportunityStatus" optionValue="name"
                                      optionKey="name"
                                      from="${com.next.OpportunityStatus.list()}" value="${params?.opportunityStatus}"
                                      noSelection="${['': '商机状态']}"/>
                                    </div>

                                </div>
                                  <div class="form-group row">

                                  <div class="col-md-6 intput-daterange input-group">
                                    <input type="text" valctrl="noteStartTime" value="${params?.noteStartTime}" placeholder="笔记开始时间" class="form-control form_date">
                                    <input type="hidden" id="noteStartTime" name="noteStartTime" value="date.struct">
                                    <input type="hidden" id="noteStartTime_day" name="noteStartTime_day" value="">
                                    <input type="hidden" id="noteStartTime_month" name="noteStartTime_month" value="">
                                    <input type="hidden" id="noteStartTime_year" name="noteStartTime_year" value="">

                                    <span class="input-group-addon">至</span>

                                    <input type="text" valctrl="noteEndTime" value="${params?.noteEndTime}" placeholder="笔记结束时间" class="form-control form_date">
                                    <input type="hidden" id="noteEndTime" name="noteEndTime" value="date.struct">
                                    <input type="hidden" id="noteEndTime_day" name="noteEndTime_day" value="">
                                    <input type="hidden" id="noteEndTime_month" name="noteEndTime_month" value="">
                                    <input type="hidden" id="noteEndTime_year" name="noteEndTime_year" value="">
                                </div>

                                </div>

                                      </label>
                                  </div>

                              </div>
                                  <div class="col-md-2 p-r-0 dt-buttons text-right">
                                      <button class="btn btn-inverse btn-sm btn-squeare" type="submit"><i class="fa fa-search"></i></button>
                                      <button class="btn btn-inverse btn-sm btn-squeare" type="button" id="resetBtn"><i class="fa fa-refresh"></i></button>
                                  </div>
                                </div>
                          </g:form>

                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                <tr>
                                    <g:sortableColumn property="department" title="部门"/>
                                    <g:sortableColumn property="account" title="客户"/>
                                    <g:sortableColumn property="account" title="百分比"/>
                                    <g:sortableColumn property="lead" title="线索"/>
                                    <g:sortableColumn property="lead" title="百分比"/>
                                    <g:sortableColumn property="activity" title="日历"/>
                                    <g:sortableColumn property="activity" title="百分比"/>
                                    <g:sortableColumn property="opportunity" title="商机"/>
                                    <g:sortableColumn property="opportunity" title="百分比"/>
                                    <g:sortableColumn property="note" title="笔记"/>
                                    <g:sortableColumn property="note" title="百分比"/>
                                </tr>
                                </thead>
                                <tbody>
                                <g:each in="${this.departmentStatistics}">
                                    <tr>
                                        <td>
                                          <g:link action="departmentList" params="[department: it?.departmentId, accountStartTime: params?.accountStartTime, accountEndTime: params?.accountEndTime, leadStartTime: params?.leadStartTime, leadEndTime: params?.leadEndTime,
                                          activityStartTime: params?.activityStartTime, activityEndTime: params?.activityEndTime, activityStatus: params?.activityStatus,
                                          opportunityStartTime: params?.opportunityStartTime, opportunityEndTime: params?.opportunityEndTime, opportunityStatus: params?.opportunityStatus,
                                          noteStartTime: params?.noteStartTime, noteEndTime: params?.noteEndTime]"
                                                    class="firstTd">${it?.department}</g:link>
                                        </td>
                                        <td>
                                          <g:link action="departmentList" params="[department: it?.departmentId, accountStartTime: params?.accountStartTime, accountEndTime: params?.accountEndTime, leadStartTime: params?.leadStartTime, leadEndTime: params?.leadEndTime,
                                          activityStartTime: params?.activityStartTime, activityEndTime: params?.activityEndTime, activityStatus: params?.activityStatus,
                                          opportunityStartTime: params?.opportunityStartTime, opportunityEndTime: params?.opportunityEndTime, opportunityStatus: params?.opportunityStatus,
                                          noteStartTime: params?.noteStartTime, noteEndTime: params?.noteEndTime]"
                                                    class="firstTd" fragment="accountDiv">${it?.accountCount}</g:link>
                                        </td>
                                        <td>
                                          <g:formatNumber number="${it?.accountPercent}" minFractionDigits="2"
                                                maxFractionDigits="2"/>%
                                        </td>
                                        <td>
                                          <g:link action="departmentList" params="[department: it?.departmentId, accountStartTime: params?.accountStartTime, accountEndTime: params?.accountEndTime, leadStartTime: params?.leadStartTime, leadEndTime: params?.leadEndTime,
                                          activityStartTime: params?.activityStartTime, activityEndTime: params?.activityEndTime, activityStatus: params?.activityStatus,
                                          opportunityStartTime: params?.opportunityStartTime, opportunityEndTime: params?.opportunityEndTime, opportunityStatus: params?.opportunityStatus,
                                          noteStartTime: params?.noteStartTime, noteEndTime: params?.noteEndTime]"
                                                    class="firstTd" fragment="leadDiv">${it?.leadCount}</g:link>
                                        </td>
                                        <td>
                                          <g:formatNumber number="${it?.leadPercent}" minFractionDigits="2"
                                                maxFractionDigits="2"/>%
                                        </td>
                                        <td>
                                          <g:link action="departmentList" params="[department: it?.departmentId, accountStartTime: params?.accountStartTime, accountEndTime: params?.accountEndTime, leadStartTime: params?.leadStartTime, leadEndTime: params?.leadEndTime,
                                          activityStartTime: params?.activityStartTime, activityEndTime: params?.activityEndTime, activityStatus: params?.activityStatus,
                                          opportunityStartTime: params?.opportunityStartTime, opportunityEndTime: params?.opportunityEndTime, opportunityStatus: params?.opportunityStatus,
                                          noteStartTime: params?.noteStartTime, noteEndTime: params?.noteEndTime]"
                                                    class="firstTd" fragment="activityDiv">${it?.activityCount}</g:link>
                                        </td>
                                        <td>
                                          <g:formatNumber number="${it?.activityPercent}" minFractionDigits="2"
                                                maxFractionDigits="2"/>%
                                        </td>
                                        <td>
                                          <g:link action="departmentList" params="[department: it?.departmentId, accountStartTime: params?.accountStartTime, accountEndTime: params?.accountEndTime, leadStartTime: params?.leadStartTime, leadEndTime: params?.leadEndTime,
                                          activityStartTime: params?.activityStartTime, activityEndTime: params?.activityEndTime, activityStatus: params?.activityStatus,
                                          opportunityStartTime: params?.opportunityStartTime, opportunityEndTime: params?.opportunityEndTime, opportunityStatus: params?.opportunityStatus,
                                          noteStartTime: params?.noteStartTime, noteEndTime: params?.noteEndTime]"
                                                    class="firstTd" fragment="opportunityDiv">${it?.opportunityCount}</g:link>
                                        </td>
                                        <td>
                                          <g:formatNumber number="${it?.opportunityPercent}" minFractionDigits="2"
                                                maxFractionDigits="2"/>%
                                        </td>
                                        <td>
                                          <g:link action="departmentList" params="[department: it?.departmentId, accountStartTime: params?.accountStartTime, accountEndTime: params?.accountEndTime, leadStartTime: params?.leadStartTime, leadEndTime: params?.leadEndTime,
                                          activityStartTime: params?.activityStartTime, activityEndTime: params?.activityEndTime, activityStatus: params?.activityStatus,
                                          opportunityStartTime: params?.opportunityStartTime, opportunityEndTime: params?.opportunityEndTime, opportunityStatus: params?.opportunityStatus,
                                          noteStartTime: params?.noteStartTime, noteEndTime: params?.noteEndTime]"
                                                    class="firstTd" fragment="noteDiv">${it?.noteCount}</g:link>
                                        </td>
                                        <td>
                                          <g:formatNumber number="${it?.notePercent}" minFractionDigits="2"
                                                maxFractionDigits="2"/>%
                                        </td>
                                    </tr>
                                </g:each>
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>
            </div>

          <!-- Page-body end -->

        </div>
</div>

<g:javascript>

    $(function () {
    $("#resetBtn").click(function () {

        $("#activityStatus").val("");
        $("#select2-activityStatus-container").text("日历状态");
        $("#opportunityStatus").val("");
        $("#select2-opportunityStatus-container").text("商机状态");
        $(".form_date").val("");
        $(".form_date").change();
    })
});

</g:javascript>

<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var labelCenter = {
        normal: {
            show: true,
            position: 'center',
            formatter: '{b} \n {c} ({d}%)'
        },
    };
    var labelHidden = {
        normal: {
            show: false,
            position: 'center'
        },
    };
    var labelLineS = {
        normal: {
            show: true,
        },
    };
    var chartOne = echarts.init(document.getElementById('one'));
    // 指定图表的配置项和数据
    var option1 = {
        title: {
            // text: '统计'
        },
        tooltip: {},

        series: [{
            name: '客户',
            type: 'pie',
            radius: ['50%', '64%'],
            center: ['10%', '38%'],
            data: [],
            markPoint: {
                symbol: 'circle',
                label: {
                    normal: {
                        show: true,
                        formatter: '{b}'
                    }
                },
                itemStyle: {},
                data: [{
                    name: '客户',
                    x: '10%',
                    y: '82%'
                }],
            }
        },
        {
            name: '线索',
            type: 'pie',
            radius: ['50%', '64%'],
            center: ['27%', '38%'],
            data: [],
            markPoint: {
                symbol: 'circle',
                label: {
                    normal: {
                        show: true,
                        formatter: '{b}'
                    }
                },
                itemStyle: {},
                data: [{
                    name: '线索',
                    x: '27%',
                    y: '82%'
                }],
            }
        },
        {
            name: '日历',
            type: 'pie',
            radius: ['50%', '64%'],
            center: ['44%', '38%'],
            data: [],
            markPoint: {
                symbol: 'circle',
                label: {
                    normal: {
                        show: true,
                        formatter: '{b}'
                    }
                },
                itemStyle: {},
                data: [{
                    name: '日历',
                    x: '44%',
                    y: '82%'
                }],
            }
        },
        {
            name: '商机',
            type: 'pie',
            radius: ['50%', '64%'],
            center: ['61%', '38%'],
            data: [],
            markPoint: {
                symbol: 'circle',
                label: {
                    normal: {
                        show: true,
                        formatter: '{b}'
                    }
                },
                itemStyle: {},
                data: [{
                    name: '商机',
                    x: '61%',
                    y: '82%'
                }],
            }
        },
        {
            name: '笔记',
            type: 'pie',
            radius: ['50%', '64%'],
            center: ['78%', '38%'],
            data: [],
            markPoint: {
                symbol: 'circle',
                label: {
                    normal: {
                        show: true,
                        formatter: '{b}'
                    }
                },
                itemStyle: {},
                data: [{
                    name: '笔记',
                    x: '78%',
                    y: '82%'
                }],
            }
        },
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    chartOne.setOption(option1);

    $.ajax({
        type: "post",
        async: false, //同步执行
        url: "/salesDashboard2/loadTotalData",
        dataType: "json", //返回数据形式为json
        data: {
          accountStartTime: '${params?.accountStartTime}',
          accountEndTime: '${params?.accountEndTime}',
          leadStartTime: '${params?.leadStartTime}',
          leadEndTime: '${params?.leadEndTime}',
          activityStartTime: '${params?.activityStartTime}',
          activityEndTime: '${params?.activityEndTime}',
          activityStatus: '${params?.activityStatus}',
          opportunityStartTime: '${params?.opportunityStartTime}',
          opportunityEndTime: '${params?.opportunityEndTime}',
          opportunityStatus: '${params?.opportunityStatus}',
          noteStartTime: '${params?.noteStartTime}',
          noteEndTime: '${params?.noteEndTime}',
        },

        success: function(result) {
          var series = [];
          var accountDatas = [];
          var leadDatas = [];
          var activityDatas = [];
          var opportunityDatas = [];
          var noteDatas = [];
          var list = result.departmentStatistics;
          for (var i = 0; i < list.length; i++)
          {
            accountDatas.push({value:list[i].accountCount, name: list[i].department, label:labelHidden, tooltip: {formatter: "{a} <br/>{b} : {c} ({d}%)"}},);
            leadDatas.push({value:list[i].leadCount, name: list[i].department, label:labelHidden, tooltip: {formatter: "{a} <br/>{b} : {c} ({d}%)"}},);
            activityDatas.push({value:list[i].activityCount, name: list[i].department, label:labelHidden, tooltip: {formatter: "{a} <br/>{b} : {c} ({d}%)"}},);
            opportunityDatas.push({value:list[i].opportunityCount, name: list[i].department, label:labelHidden, tooltip: {formatter: "{a} <br/>{b} : {c} ({d}%)"}},);
            noteDatas.push({value:list[i].noteCount, name: list[i].department, label:labelHidden, tooltip: {formatter: "{a} <br/>{b} : {c} ({d}%)"}},);

          }
          series.push({
              name: '客户',
              data: accountDatas
          });

          series.push( {
                name: '线索',
                data: leadDatas
            });
          series.push( {
                name: '日历',
                data: activityDatas
            });
          series.push( {
                name: '商机',
                data: opportunityDatas
            });
          series.push( {
                name: '笔记',
                data: noteDatas
            });

            chartOne.hideLoading(); //隐藏加载动画
            chartOne.setOption({ //渲染数据
              series: series
            });
        },
        error: function() {
            alert("请求数据失败!");
        }
    });

    window.onresize = function() {
        chartOne.resize();
    }
</script>

</body>

</html>
